﻿<template>
    <div>
        <el-dialog :title="title" :visible="state" :before-close="close" :close-on-click-modal="false" style="font-weight: 700">
            <el-form :model="carFormData">
                <div style="margin:0 0 1rem;text-align: right;color: red">注：添加车主卡需先添加用户信息</div>
                <el-form-item label="用户名：" :label-width="formLabelWidth">
                    <el-input v-model="carFormData.user_name" placeholder="请输入用户名" :disabled="true" clearable></el-input>
                    <span></span>
                </el-form-item>
                <el-form-item label="联系电话：" :label-width="formLabelWidth">
                    <el-input v-model="carFormData.user_phone" placeholder="请输入联系电话" clearable @blur="searchUser"></el-input>
                </el-form-item>
                <el-form-item label="行驶证车主姓名：" :label-width="formLabelWidth">
                    <el-input v-model="carFormData.vehicle_name" placeholder="请输入行驶证车主姓名" @blur="userCarNameCS" clearable></el-input>
                    <span>{{userCarNameText}}</span>
                </el-form-item>
                <el-form-item label="车主身份证号：" :label-width="formLabelWidth">
                    <el-input v-model="carFormData.user_idnum" placeholder="请输入车主身份证号" @blur="userCarNumCS" clearable></el-input>
                    <span>{{userCarNumText}}</span>
                </el-form-item>
                <el-form-item label="车牌号：" :label-width="formLabelWidth">
                    <el-input v-model="carFormData.car_license_num" placeholder="请输入车牌号" @blur="carNumCS" clearable></el-input>
                    <span>{{carNumText}}</span>
                </el-form-item>
                <el-form-item label="品牌型号：" :label-width="formLabelWidth">
                    <div style="position: absolute;left: 0;">
                        <el-select v-model="value" placeholder="请选择" @change="pingPai">
                            <el-option
                                    v-for="(item,index) in options"
                                    :key="index"
                                    :label="item.brand_name"
                                    :value="item.brand_id">
                            </el-option>
                        </el-select>
                        <el-select v-model="value2" placeholder="请选择" @change="leiXing">
                            <el-option
                                    v-for="(item,index) in options2"
                                    :key="index"
                                    :label="item.car_model_desc"
                                    :value="item.car_model_id">
                            </el-option>
                        </el-select>
                        <el-select v-model="value3" placeholder="请选择" @change="JtleiXing">
                            <el-option
                                    v-for="(item,index) in options3"
                                    :key="index"
                                    :label="item.car_specific_models_desc"
                                    :value="item.car_specific_models_id">
                            </el-option>
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item label="车辆初登日期：" :label-width="formLabelWidth">
                    <!--得到的时间是一个string，不需转换-->
                    <el-date-picker
                            v-model="carFormData.owner_first_date"
                            type="datetime"
                            size="small"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期时间"
                            style="width: 20rem">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="照片：" :label-width="formLabelWidth" style="display:block">
                    <!--<el-image :visible="dialogVisible">
                        <img width="300" :src="'http://172.16.10.111:8080'+this.carFormData.vehicle_license_address" alt="">
                    </el-image>-->
                    <el-upload
                            :multiple="false"
                            ref="cheZhuKa"
                            style="width: 50rem"
                            name="multipartFiles"
                            :auto-upload="true"
                            action="/api/user/uploadFile.do"
                            list-type="picture-card"
                            :on-success="successImage"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="tiJiao" :disabled="shuruState">确 定</el-button>
                <el-button @click="quXiao">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import * as api from '../../utils/api'
    import jiangMethod from '../../utils/jiangMethod'
    export default {
        name: "carCardForm",
        props:['title','state','carFormData','shengData'],
        data(){
            return{
                formLabelWidth: '9rem',
                carCardFormShangChuan:{
                    userId:'',
                    userIdnum:'',
                    userName:'',
                    userPhone:'',
                    vehicleName:'',
                    ownerFirstDate:'',
                    carLicenseNum:'',
                    brandId:'',
                    carModelId:'',
                    carSpecificModelsId:'',
                    vehicleLicenseAddress:'',
                    carId:'',
                    ownerCardId:'',
                    vehicleLicenseId:''
                },
                shuruState:'',
                // 下拉框
                value:'',
                options: [],
                value2:'',
                options2: [],
                value3:'',
                options3: [],

                vehicleLicenseAddress:'',

                carNumText:'',
                userCarNameText:'',
                userCarNumText:'',
                carNumState:false,
                userCarNameState:false,
                userCarNumState:false,

                dialogImageUrl: '',
                dialogVisible: false,
            }
        },
        watch:{
            title:function(){
                if (this.title==='添加车主卡'){
                    this.options2=[]
                    this.options3=[]

                    this.shuruState=true
                    /*this.dialogVisible=false*/
                }else {
                    this.shuruState=false

                    this.userCarNameState=true
                    this.carNumState=true
                    this.userCarNumState=true

                    /*this.dialogImageUrl=this.carFormData.vehicle_license_address
                    this.dialogVisible=true*/
                }
            },
            carFormData:function () {
                // console.log(this.carFormData)

                this.value = this.carFormData.brand_name
                this.value2 = this.carFormData.car_model_desc
                this.value3 = this.carFormData.car_specific_models_desc

                if (this.carFormData.brand_id!=''){
                        this.axios({
                            method: 'get',
                            url:api.queryCarModel,
                            params:{brandId:this.carFormData.brand_id}
                        }).then(data=>{
                            // console.log(data)
                            this.options2=data.data.data

                        })
                }
                if (this.carFormData.brand_id!=''){
                    this.axios({
                        method:'get',
                        url:api.queryCarSpecificModels,
                        params: {carModelId:this.carFormData.car_model_id}
                    }).then(data=>{
                        // console.log(data)
                        this.options3=data.data.data
                    })
                }
            },
        },
        created() {
            this.axios({
                method: 'get',
                url:api.queryBrand
            }).then(data=>{
                // console.log(data)
                this.options={...data.data.data}
                // console.log(this.options)
                // console.log(this.carFormData)
            })
        },


        methods:{
            clearState(){
                this.carNumText=''
                this.userCarNameText=''
                this.userCarNumText=''

                this.carNumState=false
                this.userCarNameState=false
                this.userCarNumState=false
            },
            userCarNameCS(){
                this.userCarNameState=jiangMethod.userNameYZ(this.carFormData.vehicle_name)
                if (jiangMethod.userNameYZ(this.carFormData.vehicle_name)){
                    this.userCarNameText='正确'
                }else if (this.carFormData.vehicle_name===''){
                    this.userCarNameText='未输入'
                }else {
                    this.userCarNameText='错误'
                }
            },
            userCarNumCS(){
                this.userCarNumState=jiangMethod.userIdnumYZ(this.carFormData.user_idnum)
                if (jiangMethod.userIdnumYZ(this.carFormData.user_idnum)){
                    this.userCarNumText='正确'
                }else if (this.carFormData.user_idnum===''){
                    this.userCarNumText='请输入内容'
                }else {
                    this.userCarNumText='错误'
                }
            },
            carNumCS(){
                this.carNumState=jiangMethod.carNumYZ(this.carFormData.car_license_num)
                if (jiangMethod.carNumYZ(this.carFormData.car_license_num)){
                    this.carNumText='正确'
                }else if (this.carFormData.car_license_num===''){
                    this.carNumText='未输入'
                }else {
                    this.carNumText='错误'
                }
            },

            searchUser(){
                // console.log(this.carFormData)
                this.axios({
                    method:'get',
                    url:api.queryUser,
                    params:{userName:this.carFormData.user_phone}
                }).then(data=>{
                    // console.log(data)
                    if (data.data.code===200){
                        // console.log(data.data.data)
                        this.carFormData.user_name=data.data.data[0].user_name
                        this.carFormData.user_id=data.data.data[0].user_id
                        this.shuruState=false
                        this.$message({
                            type:'success',
                            message:'该用户已添加数据，可添加车主卡'
                        })
                    }else {
                        this.shuruState=true
                        this.$message({
                            type:'error',
                            message:'该用户未添加数据，不可添加车主卡'
                        })
                    }

                })
            },

            // 两个接口  图片文件上传的时候自动上传，调用接口上传，返还一个图片地址，然后将图片地址与其他数据一起通过另一个接口将所有数据上传
            //文件上传成功时  resp返还的数据
            successImage(resp,file,fileList){
                // console.log(resp.data)
                // console.log(file)
                // console.log(fileList)
                // this.vehicleLicenseAddress.push(resp)
                this.vehicleLicenseAddress=resp.data
                /*fileList.map(item=>{
                    console.log(item.response.data)
                    this.vehicleLicenseAddress=''+this.vehicleLicenseAddress
                    this.vehicleLicenseAddress=this.vehicleLicenseAddress+item.response.data
                })
                console.log(this.vehicleLicenseAddress)*/
            },
            tiJiao(){
                // console.log('上传')
                // 组装数据  数据结构是formData
                this.value = this.carFormData.brand_id
                this.value2 = this.carFormData.car_model_id
                this.value3 = this.carFormData.car_specific_models_id

                this.carCardFormShangChuan.userId=this.carFormData.user_id
                this.carCardFormShangChuan.brandId=this.value
                this.carCardFormShangChuan.carModelId=this.value2
                this.carCardFormShangChuan.carSpecificModelsId=this.value3
                this.carCardFormShangChuan.carId=this.carFormData.car_id
                this.carCardFormShangChuan.ownerCardId=this.carFormData.owner_card_id
                this.carCardFormShangChuan.vehicleLicenseId=this.carFormData.vehicle_license_id

                this.carCardFormShangChuan.userName=this.carFormData.user_name
                this.carCardFormShangChuan.userPhone=this.carFormData.user_phone
                this.carCardFormShangChuan.vehicleName=this.carFormData.vehicle_name
                this.carCardFormShangChuan.userIdnum=this.carFormData.user_idnum
                this.carCardFormShangChuan.carLicenseNum=this.carFormData.car_license_num
                this.carCardFormShangChuan.ownerFirstDate=this.carFormData.owner_first_date
                if (this.vehicleLicenseAddress){
                    this.carCardFormShangChuan.vehicleLicenseAddress=this.vehicleLicenseAddress
                }else {
                    this.carCardFormShangChuan.vehicleLicenseAddress=this.carFormData.vehicle_license_address
                }

                if (this.title==='添加车主卡'){
                    // console.log(this.vehicleLicenseAddress)
                    if (this.userCarNameState&&this.carNumState&&this.userCarNumState){
                        this.axios({
                            method: 'post',
                            url:api.addOwnerCard,
                            data:this.carCardFormShangChuan
                        }).then(data=>{
                            // console.log(data)
                            if (data.data.code===200){
                                this.$message({
                                    type:'success',
                                    message:data.data.msg
                                })
                            }else {
                                this.$message({
                                    type:'error',
                                    message:data.data.msg
                                })
                            }
                        })
                        this.$emit('quxiaotanKuang')
                    }else {
                        this.$message({
                            type:'warning',
                            message:'请检查输入的信息是否存在错误'
                        })
                    }
                }else {
                    if (this.userCarNameState&&this.carNumState&&this.userCarNumState){
                        this.axios({
                            method: 'post',
                            url:api.updateOwnerCard,
                            data:this.carCardFormShangChuan
                        }).then(data=>{
                            // console.log(data)
                            if (data.data.code===200){
                                this.$message({
                                    type:'success',
                                    message:data.data.msg
                                })
                            }else {
                                this.$message({
                                    type:'error',
                                    message:data.data.msg
                                })
                            }
                        })
                        this.$emit('quxiaotanKuang')
                    }else {
                        this.$message({
                            type:'warning',
                            message:'请检查输入的信息是否存在错误'
                        })
                    }
                }

            },


            //品牌
            pingPai(){
                // console.log(this.value)
                this.axios({
                    method: 'get',
                    url:api.queryCarModel,
                    params:{brandId:this.value}
                }).then(data=>{
                    // console.log(data)
                    this.options2=data.data.data

                })
            },
            //类型
            leiXing(){
                // console.log(this.value2)
                this.axios({
                    method:'get',
                    url:api.queryCarSpecificModels,
                    params: {carModelId:this.value2}
                }).then(data=>{
                    // console.log(data)
                    this.options3=data.data.data
                })
            },
            // 具体类型
            JtleiXing(){
                // console.log(this.value3)
                this.carFormData.car_specific_models_id=this.value3
            },


            close(){
                this.clearState()
                this.$emit('quxiaotanKuang')
                this.$message({
                    showClose: true,
                    type:"warning",
                    message:'关闭操作'
                })
            },
            quXiao(){
                this.clearState()
                this.$emit('quxiaotanKuang')
                this.$message({
                    showClose: true,
                    type:"warning",
                    message:'取消操作'
                })
            },
        }
    }

</script>

<style lang="less" scoped>
    .el-form{
        /*border: 1px solid red;*/
        width:100%;
        margin: auto;
        text-align: left;
        .el-form-item{
            display: inline-block;
            width: 30rem;
            /*border: 1px solid red;*/
            position: relative;
            margin-right: 0.1rem;
            .el-input{
                /*border: 1px solid red;*/
                width: 16rem;
                display: inline-block;
                position: absolute;
                left: 0;
            }
            span{
                position: absolute;
                left: 16.5rem;
            }
            .el-select{
                width: 6.5rem;
            }
        }
    }

</style>